<template>
  <div>
    <van-button
      type="primary"
      style="position: fixed; top: 0; right: 0; z-index: 9999"
      >按钮</van-button
    >
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的"
        @load="onLoad"
        offset="100"
      >
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          :title="index + '=====' + item.title"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false, //到底了
      refreshing: false,
      start: 1,
      end: 20,
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (this.start >= 80) {
        this.loading = false;
        this.finished = true;
        return;
      }
      //   setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }
      //     // 加载状态结束
      //     this.loading = false;
      //     // 数据全部加载完成
      //   }, 1000);
      this.getData();
      this.start += 20;
      this.end += 20;
      //   this.loading = false;
    },
    async getData() {
      const res = await axios({
        url: "http://124.223.73.204:8080/houses",
        params: {
          start: this.start,
          end: this.end,
          city: "AREA|dbf46d23-7e76-1196",
        },
      });
      console.log(res);
      if (this.refreshing) {
        this.list = res.data.body.list;
      } else {
        this.list = [...this.list, ...res.data.body.list];
      }
      this.loading = false;
      this.refreshing = false;
    },

    // async getData2() {
    //   const res = await axios({
    //     url: "https://img.xjh.me/random_img.php?return=json&type=acg",
    //   });
    //   console.log(res);
    // },
    onRefresh() {
      this.finished = false;
    //   this.loading=true
        this.start = 1;
        this.end = 35;
      this.onLoad();
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
